<template>
	<view>
		<view class="tuan-banner">
			<swiper class="swiper-banner" :current="selectIndex" @change="swiperAct" :indicator-dots="false" :autoplay="true" :interval="3000" :duration="500">
				<swiper-item v-for="(item,index) in  photos" :key="index">
					<image mode="aspectFill" :src="item"></image>
				</swiper-item>
			</swiper>
			<view class="tuan-banner-num ft12">{{selectIndex+1}}/{{bannerNum}}</view>
		</view>
		<view class="bg-w pd30">
			<view class="ft20 text-main ftw600">
				男神女神分享餐，建议2人使用-情侣双人套餐折上折优惠来袭
			</view>
			<view class="flex alcenter mt30">
				<view class="tuan-detail-l ">
					<view class="flex alcenter">
						<view class="tag tag-hot flex alcenter">
							<app-icon name="icon_hot1" type="iconfont" />
							<text class="ml10">火爆</text>
						</view>
						<view class="tag tag-info ml20">
							200人推广
						</view>
						<view class="ft14 text-notice ml20">
							已售1200
						</view>
					</view>
					<view class="mt10 flex alcenter">
						<view class="text-price">
							<text class="ft14">￥</text>
							<text class="ft16 ftw600">299</text>
						</view>
						<view class="text-notice text-line ft12 ml10">
							¥1299
						</view>
						<view class="ft12 ml30 tag-zk text-w">2.3折</view>
					</view>
				</view>
				<view class="tuan-detail-r bdlt text-right">
					
					<!-- <view class="iconfont iconbtn_collect ft24 text-info"></view> -->
					<view class="iconfont iconbtn_collected ft24 text-theme"></view>
					<view class="ft14 text-info">收藏</view>
				</view>
			</view>
		</view>
		
		<view class="mt20 mb20">
			<unio2o-store-card></unio2o-store-card>
		</view>
		
		<view class="pd30 bg-w">
			<view class="pt20 mb50 text-default ft18 ftw600">
				套餐内容
			</view>
			<view class="mb40 flex space alcenter">
				<view>
					<text class="ft16 text-main">香辣鸡排堡</text>
					<text class="text-notice ft14">（1份）</text>
				</view>
				<view class="ft14 ftw600">
					￥79
				</view>
			</view>
			<view class="mb40 flex space alcenter">
				<view>
					<text class="ft16 text-main">香辣鸡排堡</text>
					<text class="text-notice ft14">（1份）</text>
				</view>
				<view class="ft14 ftw600">
					￥79
				</view>
			</view>
		</view>
	
		<view class="mt20 bg-w pd30">
			<view class="pt20 mb50 text-default ft18 ftw600">
				购买须知
			</view>
			
			<view class="ft16 text-main ftw600">
				有效期：
			</view>
			<view class="ft14 text-info mt30">
				2019.1.31至2019.3.31(周末、法定假日通用)
			</view>
			<view class="ft16 text-main mt50 ftw600">
				使用时间：
			</view>
			<view class="ft14 text-info mt30">
				08:30-14:30，17:00-22:00
			</view>
			<view class="ft16 text-main mt50 ftw600">
				退款规则：
			</view>
			<view class="mt30">
				<text class="ft14 text-info">
				• 	购买抢购套餐后且在核销前都可进行退款，过期自动退，可全额退款；
				• 	如订单使用优惠券或者抵扣券，申请退款同意之后自动退还；
				• 	如订单退款后，支付时赠送的券自动退回平台商家
				</text>
			</view>
			
			<view class="ft16 text-main mt50 ftw600">
				使用规则：
			</view>
			<view class="mt30 pb30">
				<text class="ft14 text-info">
					•	团购用户不可同时享受商家其他优惠
					•	酒水饮料等问题，请致电商家咨询，以商家反馈为准
					•	如部分菜品因时令或其他不可抗因素导致无法提供，商家会用等价菜品替换，具体事宜请与商家协商
					•	店内无包厢
					•	无需预约，消费高峰期可能需要等位
					•	每张抢购券建议2-3人使用
					•	商家免费提供Wi-Fi
					•	仅限堂食，不提供餐前外带，餐毕未吃完可打包，打包费另算
				</text>
			</view>
			
		</view>
	
		
		<view class="mt20 bg-w pd30">
			<view class="pt20 mb50 text-default ft18 ftw600">
				详情介绍
			</view>
			<view class="tuan-detail-content">
				<image mode="widthFix" :src="contentImg"></image>
				<view>
					仅售9.9元！最高价值16元的休闲餐，建议单人使用。
					味道赞，环境优雅，性价比高，菜品很好，强烈安利，真的很合算，只花了1分钱就买了9.9的套餐
				</view>
			</view>
		</view>	
	
		<view class="tuan-detail-footer-h"></view>
		<view class="tuan-detail-footer bg-w box-shadow-top flex space">
			<view class="tuan-detail-footer-h tuan-footer-btn-s">
				<view class="tuan-detail-footer-content-h flex alcenter pr30">
					<view class="col2 text-center">
						<view class="iconfont iconbtn_bottom_shop ft22"></view>
						<view class="ft14 text-info">店铺</view>
					</view>
					<view class="col2">
						<view class="text-center">
							<button class="tuan-share-btn">
								<text class="iconfont iconbtn_bottom_share ft22"></text>
							</button>
							<view class="ft14 text-info mt10">分享</view>
						</view>
					</view>
				</view>
			</view>
			<view class="tuan-detail-footer-h bg-invite tuan-footer-btn">
				<view class="tuan-detail-footer-content-h  flex center alcenter">
					<view class="ft16 ftw600 text-w text-center">
						<view>推广赚</view>
						<view>￥99</view>
					</view>
				</view>
			</view>
			<view class="tuan-detail-footer-h bg-main tuan-footer-btn">
				<navigator url="/pages/tuan/buy">
					<view class="tuan-detail-footer-content-h  ft16 ftw600 text-w flex center alcenter">
						立即购买
					</view>
				</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	import unio2oStoreCard from '@/components/module/store/card.vue';
	export default{
		components:{
			unio2oStoreCard
		},
		computed:{
			bannerNum(){
				return this.photos.length;
			}
		},
		data(){
			return {
				selectIndex:0,
				contentImg:this.$config.staticUrl + 'photo/01.jpg',
				photos:[
					this.$config.staticUrl + 'photo/01.jpg',
					this.$config.staticUrl + 'photo/02.jpg',
					this.$config.staticUrl + 'photo/03.jpg',
				]
			}
		},
		methods:{
			swiperAct(e){
				this.selectIndex = e.detail.current;
			},	
		}
	}
</script>

<style>
	.tuan-share-btn{
		padding: 0rpx;
		line-height: 1;
		background: #FFFFFF;
	}
	.tuan-share-btn::after{
		border:none;
	} 
	.tuan-footer-btn{
		width: 240rpx;
	}
	.tuan-footer-btn-s{
		width: calc(100% - 480rpx);
	}
	.tuan-detail-footer-content-h{
		height: 120rpx;
	}
	.tuan-detail-footer-h{
		height: calc(120rpx + env(safe-area-inset-bottom));
	}
	.tuan-detail-footer{
		height: calc(120rpx + env(safe-area-inset-bottom));
		/* padding-bottom:env(safe-area-inset-bottom); */
		width: 100%;
		position: fixed;
		z-index: 88;
		left: 0;
		bottom: 0;
	}
	.tuan-detail-content{
		line-height: 40rpx;
		font-size: 28rpx;
		color:#666666;
	}
	.tuan-detail-content image{
		width: 100%;
	}
	.tuan-detail-r{
		width: 90rpx;
	}
	.tuan-detail-l{
		width: calc(100% - 90rpx);
	}
	.tuan-banner-num{
		position: absolute;
		right: 30rpx;
		bottom: 30rpx;
		padding: 0 10rpx;
		height: 40rpx;
		text-align: center;
		line-height: 40rpx;
		border-radius: 8rpx;
		background: rgba(0,0,0,.3);
		color:#FFFFFF;
	}
	.tuan-banner{
		height: 750rpx;
		width: 100%;
		position: relative;
	}
	.swiper-banner{
		height: 750rpx;
		width: 100%;
	}
	.swiper-banner image{
		width: 100%;
		height: 750rpx;
	}
</style>